<template>
	<view class="page">
		<!-- 顶部背景 -->
		<view class="top">
			<view class="background"></view>
		</view>

		<!-- 个人信息卡片 -->
		<view class="user-card">
			<view class="card">
				<view class="top">
					<view class="userImage" @click="handleAvatarClick">
						<!-- 头像 -->
						<image style="width: 150rpx; height: 150rpx;" :src="avatar" mode="aspectFill"></image>
					</view>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="user-text flex items_center">
							<text>{{ username }}</text>
						</view>
						<view class="signature">
							<text>个性签名：{{ signature }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="list-card">
			<view class="card">
				<view class="item" v-for="(item, index) in navs" :key="index" @click="navigate(item.url)">
					<view style="display: flex; align-items: center;">
						<uni-icons :type="item.icon" size="24"></uni-icons>
						<text style="margin-left: 10rpx;">{{ item.title }}</text>
					</view>
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: 'AI笔记用户', // 默认用户名
			avatar: '/static/山师.jpg', // 默认头像路径
			signature: '努力学习，共同进步！', // 默认个性签名
			navs: [
				{ title: '个人资料', icon: 'person', url: '/pages/profile/profile' }, // 修改个人资料页面
				{ title: '退出登录', icon: 'close', url: '' }
			]
		};
	},
	onShow() {
		// 每次进入页面时获取最新的用户信息
		this.loadUserInfo();
	},
	methods: {
		// 加载用户信息
		loadUserInfo() {
			const userInfo = uni.getStorageSync('userInfo') || {};
			this.avatar = userInfo.avatar || this.avatar;
			this.username = userInfo.username || this.username;
			this.signature = userInfo.signature || this.signature;
		},
		// 处理头像点击
		handleAvatarClick() {
			uni.showActionSheet({
				itemList: ['更换头像', '查看头像'],
				success: (res) => {
					if (res.tapIndex === 0) {
						this.chooseAvatar(); // 更换头像
					} else if (res.tapIndex === 1) {
						this.previewAvatar(); // 查看头像
					}
				}
			});
		},
		// 更换头像
		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.avatar = res.tempFilePaths[0];
					this.saveUserInfo();
					uni.showToast({ title: '头像已更换', icon: 'success' });
				}
			});
		},
		// 查看头像大图
		previewAvatar() {
			uni.previewImage({
				urls: [this.avatar],
				indicator: 'default'
			});
		},
		// 保存用户信息
		saveUserInfo() {
			const userInfo = {
				avatar: this.avatar,
				username: this.username,
				signature: this.signature
			};
			uni.setStorageSync('userInfo', userInfo);
		},
		// 页面跳转
		navigate(url) {
			if (url) {
				uni.navigateTo({ url });
			} else {
				// 退出登录
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync(); // 清空本地存储
							uni.reLaunch({ url: '/pages/login/login' }); // 返回登录页面
						}
					}
				});
			}
		}
	}
};
</script>


<style lang="scss" scoped>
.top {
	height: 200rpx;
	position: relative;

	.background {
		background-color: #7e57c2;
		height: 200rpx;
		width: 100%;
		position: absolute;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	}
}

.user-card {
	height: 140rpx;
	padding: 0 15px;

	.card {
		position: relative;
		bottom: 72rpx;
		height: 200rpx;
		background-color: white;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);

		.top {
			height: 30%;
			position: relative;

			.userImage {
				position: absolute;
				bottom: 20%;
				left: 50%;
				transform: translateX(-50%);
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				border: 4px solid white;
				overflow: hidden;
			}
		}

		.bottom {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #333;
			margin-top: 10rpx;
		}.left{}.signature {
			font-size: 28rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}
}

.list-card {
	padding: 0 15px;

	.card {
		background-color: white;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
		padding: 5px 30px;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1px solid #f0f0f0;
			font-size: 32rpx;

			&:last-child {
				border-bottom: none;
			}
		}
	}
}
</style>